import React from "react";

import "@xyflow/react/dist/style.css";
import useColorStore from "../../../stores/color-manage";
import { useShallow } from "zustand/shallow";
import { ReactFlow } from "@xyflow/react";
import ColorChooserNode from "./ColorChooserNode";

const nodeTypes = { colorChooser: ColorChooserNode };
const selector = (state) => ({
  nodes: state.nodes,
  edges: state.edges,
  onNodesChange: state.onNodesChange,
  onEdgesChange: state.onEdgesChange,
  onConnect: state.onConnect,
});

function Flow() {
  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } =
    useColorStore(useShallow(selector));
  return (
    <ReactFlow
      nodesDraggable={false}
      colorMode="dark"
      nodes={nodes}
      edges={edges}
      nodeTypes={nodeTypes}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
    />
  );
}

export default Flow;
